How to convert html template into react project

how-to-convert-html-template-into-react-project

How to convert HTML template into React Project

How to convert html template into react project

By following steps you can convert any HTML template into react project.

Step 1 . Download the html template in your local machine.

Step 2. Create a new react project by command

npx create-react-app application-name

Step 3. Go to the downloaded HTML template folder and copy all the folders from here.

Step 4. Go to your react project public folder and create a new folder called assets and paste all the copied folders inside this.

How to convert html template into react project

Step 5. Open the index.html file from HTML template folder in any editor and copy the entire content inside tag.

Step 6. Go to visual studio and open index.html file in public folder and remove the existing content inside the <head> tag and paste the copied content here.

Step 7. Go to your src folder and create a new folder called pages and inside pages create a new file home.js as shown in the below image.

How to convert html template into react js

Step 8. Go to your index.html file in the HTML template folder and copy the entire content from <body> tag.

Step 9. Go to visual studio code and open the home.js file inside the pages folder and paste the copied content inside the <div> tag.

Step 10. Now close <br>,<hr>,<img>,<input> tags with <br/>,<hr/>,<img /> , <input/> tags.

Step 11. Now open app.js file in src folder and import Home file and also include the Home inside the main div as shown in the below image.

convert html template into react

Step 12. Now open a new terminal in the visual studio and run the command npm start. This is start the development server and you can see your react project in the browser.



Leave a Comment